<template>
	<!-- <view class="status_bar"></view> -->
	<view class="container" style="background-color: white">
		<!-- 	<view class="header">
			<text>APT</text>
		</view> -->
		<view class="content">
			<uv-tabs
				:current="tabCurrent"
				:list="list"
				@change="change"
				customStyle="height: 80px;line-height:80px"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
			></uv-tabs>
			<!-- 		<view>
				<view class="flex-item">Login</view>
				<view class="flex-item">register</view>
			</view> -->
			<view :class="isLogin">
				<view>
					<uni-easyinput prefixIcon="person-filled" class="input-style" v-model="username" :placeholder="$t('login.userinput')"></uni-easyinput>
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="password" :placeholder="$t('login.passwordinput')" style="margin-top: 10px"></uni-easyinput>
				</view>
				<uni-row style="height: 80rpx; line-height: 80rpx">
					<uni-col :span="12">
						<text @click="gotoAgreeMent()" style="font-size: 24rpx">{{ $t('login.User') }}</text>
					</uni-col>
					<uni-col :span="12">
						<text style="float: right; font-size: 24rpx" @click="goForget">{{ $t('login.ForgottenPassword') }}？</text>
					</uni-col>
				</uni-row>
				<view style="margin-top: 10px">
					<button size="default" type="default" :loading="loading" @click="gotoMainPage()">
						{{ $t('login.Login') }}
					</button>
				</view>
			</view>
			<view :class="isRegister">
				<view>
					<uni-easyinput v-model="register.phone" prefixIcon="person-filled" class="input-style" :placeholder="$t('login.userinput')"></uni-easyinput>
					<view class="email-box">
						<uni-easyinput v-model="register.email" prefixIcon="person-filled" class="input-style" :placeholder="$t('login.email')"></uni-easyinput>
						<view class="send-text" @click="onSendCode">
							<text v-if="codeMsg.count <= 0">{{ $t('login.getEmail') }}</text>
							<text v-else>{{ codeMsg.count }}S</text>
						</view>
					</view>
					<uni-easyinput v-model="register.password" prefixIcon="locked-filled" type="password" :placeholder="$t('login.passwordinput')" style="margin-top: 10px"></uni-easyinput>
					<!-- <uni-easyinput v-model="repassword" prefixIcon="locked-filled" type="password" :placeholder="$t('login.repasswordinput')"
						style="margin-top: 10px;"></uni-easyinput> -->
				</view>
				<uni-easyinput v-model="register.code" :placeholder="$t('login.code')" style="margin-top: 10px; width: 50%"></uni-easyinput>
				<!-- <view style="height: 50px; margin-top: 10px; position: relative">
					<uni-easyinput v-model="register.code" placeholder="input code" style="margin-top: 10px; width: 50%; position: absolute; float: left"></uni-easyinput>
					<jp-verification-literalness ref="veri" :securityCode="this.serverCode" style="float: right; z-index: 999"></jp-verification-literalness>
				</view> -->
				<view style="margin-top: 10px">
					<button size="default" type="default" :loading="loading" @click="registerBtn()">
						{{ $t('login.Register') }}
					</button>
				</view>
			</view>
		</view>
		<!-- <view class="leaf"></view>
		<view class="bottom"></view> -->
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'button',
			loading: false,
			username: '',
			password: '',
			tabCurrent: 0,
			list: [
				{
					name: this.$t('login.Login')
				},
				{
					name: this.$t('login.Register')
				}
			],
			isLogin: '',
			isRegister: '',
			register: {
				phone: '',
				email: '',
				password: '',
				code: ''
			},
			serverCode: '',
			repassword: '',
			codeMsg: {
				time: 0,
				count: 0
			}
		};
	},

	onReady() {
		// this.isLogin = "hidden"
		// this.isRegister = "hidden"
		this.change({
			name: 'login',
			index: 0
		});
		
		this.username = uni.getStorageSync("username");
		this.password = uni.getStorageSync('password');
		
		if(this.username != '' && this.password != '')
			this.gotoMainPage();
	},
	methods: {
		getEmailCode() {
			return this.$request(this.$api.getEmailCode, {
				email: this.register.email
			})
				.then((res) => {
					console.log(res);
					const { code, msg } = res;
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					if (code == 1) return Promise.resolve(true);
					return Promise.reject(false);
				})
				.catch((res) => {
					console.log('err', res);
					return Promise.reject(false);
				});
		},
		async onSendCode() {
			if (!this.register.email) {
				uni.showToast({
					title: this.$t('login.email'),
					icon: 'none'
				});
				return;
			}
			if (this.codeMsg.count > 0) return;
			uni.showLoading({
				title: this.$t('system.loading'),
				mask: true
			});
			try {
				await this.getEmailCode();
				uni.hideLoading();
				this.codeMsg.count = 60;
				this.codeMsg.time = setInterval(() => {
					this.codeMsg.count--;
					if (this.codeMsg.count <= 0) {
						clearInterval(this.codeMsg.time);
					}
				}, 1000);
			} catch (e) {
				uni.hideLoading();
			}
		},
		change(res) {
			if (res.index == 0) {
				this.isLogin = '';
				this.isRegister = 'hidden';
			} else {
				this.isLogin = 'hidden';
				this.isRegister = '';
			}
		},
		goForget() {
			uni.navigateTo({
				url: '/pages/login/forget'
			});
		},

		gotoAgreeMent() {
			uni.navigateTo({
				url: '/pages/assist/agreement'
			});
		},
		gotoMainPage() {
			if (this.username == '' || this.password == '') {
				uni.showToast({
					title: '手机号或者密码不能为空',
					icon: 'none',
					duration: 2000
				});
			}

			this.$request(this.$api.login, {
				account: this.username,
				password: this.password
			}).then((res) => {
				console.log(res);
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				} else if (res.code == 1) {
					// console.log(res.result.id)
					uni.setStorageSync('userId', res.result.id.toString());
					uni.setStorageSync('token', res.result.token); //写入token
					uni.switchTab({
						url: '/pages/main/monitor'
					});
					
					//记录用户名和密码
					uni.setStorageSync('username',this.username);
					uni.setStorageSync('password',this.password);
				}
			});
		},

		registerBtn() {
			const { phone, email, password, code } = this.register;
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			if (!phone) {
				uni.showToast({
					title: this.$t('login.userinput'),
					icon: 'none'
				});
				return;
			}
			if (!email) {
				uni.showToast({
					title: this.$t('login.email'),
					icon: 'none'
				});
				return;
			}
			if (!emailRegex.test(email)) {
				uni.showToast({
					title: this.$t('login.verifyEmail'),
					icon: 'none'
				});
				return;
			}
			if (!password) {
				uni.showToast({
					title: this.$t('login.passwordinput'),
					icon: 'none'
				});
				return;
			}
			if (!code) {
				uni.showToast({
					title: this.$t('login.code'),
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: this.$t('system.loading'),
				mask: true
			});
			this.$request(this.$api.register, this.register)
				.then((res) => {
					const { code, msg } = res;
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					setTimeout(() => {
						this.tabCurrent = 0;
					}, 800);
					
					if(res.code == 1){
						setTimeout(()=>{
							this.change({
								name: 'login',
								index: 0
							});
						},2000);
					}
					// if (res.code == 1) {
					// 	this.messageToggle('success', '注册成功');
					// } else {
					// 	this.messageToggle('error', res.msg);
					// }
				})
				.catch((err) => {
					console.log(err);
					uni.hideLoading();
				});
		},

		getCode() {
			this.$request(this.$api.getcode, { account: '' }).then((res) => {
				// console.log(res);
				if (res.code) this.serverCode = res.result;
				else {
					this.messageToggle('warn', res.msg);
				}
			});
			this.serverCode = this.serverCode;
		},

		messageToggle(type, message) {
			this.msgType = type;
			this.messageText = message;
			this.$refs.message.open();
		}
	}
};
</script>

<style lang="scss" scoped>
.email-box {
	display: flex;
	align-items: center;
	margin-top: 10px;
	.send-text {
		font-size: 24rpx;
		margin-left: 20rpx;
	}
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	position: fixed;
	background-image: url('../../static/login/background.png');
	background-size: cover;
}

.content {
	border: solid 1rpx skyblue;
	border-radius: 20rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-bottom: 100rpx;
	flex: 1;
	// height: 40vh;
	background-color: white;
	padding: 20px;
}

.flex-item {
	width: 50%;
	height: 200rpx;
	text-align: center;
	line-height: 200rpx;
	float: left;
}

.input-style {
	border-radius: 40rpx;
}

.header {
}
/*
	.header {
		background-image: url('../../static/login/header.png');
		background-size: cover;
		width: 100%;
		height: 24vh;
		left: 0;
		top: 0;
		position: absolute;
		z-index: -1;
	}

	.bottom {
		background-image: url('../../static/login/bottom.png');
		background-size: cover;
		width: 100%;
		height: 19vh;
		left: 0;
		bottom: 0;
		position: absolute;
		z-index: -1;
	}

	.leaf {
		background-image: url("../../static/login/leaf.png");
		background-size: cover;
		width: 20vh;
		height: 19vh;
		left: 0;
		bottom: 19vh;
		position: absolute;
		z-index: 99;
	}
*/
.hidden {
	display: none;
}

.popup-success {
	color: #fff;
	background-color: #e1f3d8;
}

.popup-warn {
	color: #fff;
	background-color: #faecd8;
}

.popup-error {
	color: #fff;
	background-color: #fde2e2;
}

.popup-info {
	color: #fff;
	background-color: #f2f6fc;
}
</style>